<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/stores'
import { getTaskListAPI, getTaskInfoAPI } from '@/api/jisuan'
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'

interface TaskData {
  task_name: string
  create_datetime: string
  status: number
  task_id: string
}

interface PageInfo {
  page: number
  size: number
  total: number | null
}

const userStore = useUserStore()
const userInfo = ref(userStore.userInfo)

const inputVal = ref('')
const showInput = ref(false)
const prototypeInfo = ref<Record<string, any>>({})
const showCPQC1 = ref(true)
const noDataText = ref('暂无任务')
const taskList = ref<TaskData[]>([])
const searchType = ref(0)

const pageInfo = ref<PageInfo>({
  page: 1,
  size: 10,
  total: null
})

// 获取任务列表
const getTaskList = async () => {
  const params = {
    task_name: inputVal.value,
    page: pageInfo.value.page,
    size: pageInfo.value.size
  }
  const res: any = await getTaskListAPI(params)
  if (res.data.length === 0 && searchType.value === 1) {
    noDataText.value = '未搜索到任何任务'
  }
  taskList.value = [...taskList.value, ...res.data]
  pageInfo.value = {
    page: res.page,
    size: res.size,
    total: res.total
  }
}

// 获取用户信息
const getTaskInfo = async () => {
  const res: any = await getTaskInfoAPI()
  prototypeInfo.value = res
}

// 滚动加载更多
const scrolltolower = () => {
  const { total, page, size } = pageInfo.value
  if (total && page < Math.ceil(total / size)) {
    pageInfo.value.page++
    getTaskList()
  }
}

// 显示搜索框
const clickShowInput = () => {
  showInput.value = true
  inputVal.value = ''
}

// 隐藏搜索框
const closeInput = () => {
  showInput.value = false
  inputVal.value = ''
  reloadData()
}

// 切换原型机
const switchPrototype = (val: boolean) => {
  getTaskInfo()
  showCPQC1.value = val
}

// 搜索数据
const searchData = () => {
  searchType.value = 1
  reloadData()
}

// 重新加载数据
const reloadData = () => {
  pageInfo.value = {
    page: 1,
    size: 10,
    total: null
  }
  taskList.value = []
  getTaskList()
}

// 清空搜索
const clearInput = () => {
  inputVal.value = ''
  searchType.value = 0
  noDataText.value = '暂无任务'
  reloadData()
}

// 跳转详情页
const goDetail = (item: TaskData) => {
  uni.navigateTo({
    url: `/pagesA/jisuan/detail?task_id=${item.task_id}`
  })
}

// 下拉刷新
onPullDownRefresh(() => {
  reloadData()
})

// 页面显示
onShow(() => {
  showCPQC1.value = true
  const userInfo = userStore.userInfo
  const loginStatus = userStore.loginStatus
  
  prototypeInfo.value = {}
  taskList.value = []

  if (userInfo !== undefined || !loginStatus) {
    reloadData()
    getTaskInfo()
  } else {
    uni.showToast({
      title: '请到"我的"登录',
      icon: 'none',
      duration: 2000
    })
  }
})

</script>

<template>
  <view class="jisuan">
    <my-header navType="list"></my-header>
    <view class="jisuan-header">
      <view class="header-content" v-if="showCPQC1">
        <img class="left" src="/static/img/prototype-one.png">
        <view class="right">
          <view class="top">
            <view class="name">CPQC-1</view>
            <view style="width: 81px;margin-left: 10px;">
              <up-button color="#2A65FF" type="primary" icon="/static/img/refresh.png" size="mini" text="切换真机" @click="switchPrototype(false)"></up-button>
            </view>
          </view>
          <view class="bottom">
            配额 <text style="color: #2A65FF;font-size: 14px;padding-left:5px;">{{ prototypeInfo.quantity ? prototypeInfo.quantity : 0 }}</text><text style="margin-left: 12px;">到期时间 {{ prototypeInfo.expire_datetime ? prototypeInfo.expire_datetime : '--' }}</text>
          </view>
        </view>
      </view>
      <view class="header-content" v-else>
        <img class="left" src="/static/img/prototype-two.png">
        <view class="right">
          <view class="top">
            <view class="name">CPQC-X</view>
            <view style="width: 81px;margin-left: 10px;">
              <up-button color="#2A65FF" type="primary" icon="/static/img/refresh.png" size="mini" text="切换真机" @click="switchPrototype(true)"></up-button>
            </view>
          </view>
          <view class="bottom">
            配额 <text style="color: #2A65FF;font-size: 14px;padding-left:5px;">{{ prototypeInfo.sum_total ? prototypeInfo.sum_total : 0 }}</text><text style="margin-left: 12px;">到期时间 {{ prototypeInfo.non_standard_expire_datetime ? prototypeInfo.non_standard_expire_datetime : '--' }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="title">
        <text>任务列表</text>
        <view v-if="showInput" style="flex: 1;display: flex;align-items: center;justify-content: flex-end;">
          <up-input
            v-model="inputVal"
            placeholder="请输入任务名称"
            fontSize="12px"
            color="rgba(0, 0, 0, 0.9)"
            clearable
            customStyle="flex:none; width: 70%;padding: 2px 9px;background: #fff"
            focus
            @clear="clearInput"
            @confirm="reloadData"
          >
            <template #suffix>
              <up-icon name="search" @click="searchData()"></up-icon>
            </template>
          </up-input>
          <text style="color: rgba(0, 0, 0, 0.4);font-size: 12px;margin-left: 8px;" @click="closeInput">取消</text>
        </view>
        <up-icon v-if="!showInput" name="search" color="#000" size="20" @click="clickShowInput"></up-icon>
      </view>
      <up-list
        width="90%"
        height="505"
        @scrolltolower="scrolltolower"
      >
        <view class="list-item-view" v-if="taskList.length > 0">
          <up-list-item
            v-for="(item, index) in taskList"
            :key="index"
          >
            <up-cell size="large" :border="index !== taskList.length - 1" @click="goDetail(item)">
              <template #title>
                <text class="up-line-1" style="width: 90%; color: #000; font-size: 14px;font-weight: 500;">{{ item.task_name }}</text>
              </template>
              <template #label>
                <text style="color: rgba(0, 0, 0, 0.24);margin-top: 10px;font-size: 14px;">{{ item.create_datetime }}</text>
              </template>
              <template #value>
                <!-- status = 0 校验中；2排队中；5成功；6失败  -->
                <up-tag 
                  size="mini" 
                  :text="item.status === 0 ? '校验中' : item.status === 2 ? '排队中' : item.status === 5 ? '已完成' : '计算失败'" 
                  :bgColor="item.status === 0 ? 'rgba(255, 183, 0, 0.1)' : item.status === 2 ? 'rgba(26, 127, 254, 0.1)' : item.status === 5 ? 'rgba(78, 189, 109, 0.1)' : 'rgba(255, 89, 89, 0.1)'"
                  :color="item.status === 0 ? '#D29E1A' : item.status === 2 ? '#1A7FFE' : item.status === 5 ? '#4EBD6D' : '#FF5959'">
                </up-tag>
              </template>
            </up-cell>
          </up-list-item>
          <text v-if="taskList.length === pageInfo.total" class="no-more">没有更多任务啦</text>
        </view>
        <view class="no-data" v-else>
          <img class="no-data-img" src="https://images-cloud.qboson.com/miniProgram/no_data_img.png" />
          <text class="no-data-text">
            {{ noDataText }}
          </text>
        </view>
      </up-list>
    </view>
  </view>
  <my-sticky-button v-if="userStore.userInfo?.uid && !userStore.userInfo?.is_user_channel" />
</template>

<style scoped lang="scss">
.jisuan{
  height: 100vh;
  overflow: auto;
  @mixin back {
    background: radial-gradient(67% 16% at 85% -1%, #C4F9FF 0%, rgba(205, 250, 255, 0) 100%), radial-gradient(145% 79% at 17% 0%, rgba(183, 215, 255, 0.6) 0%, rgba(204, 227, 255, 0.4235) 40%, rgba(255, 255, 255, 0) 100%), #F8F8F8;
    background-size: 100vw 100vh;
  }
  @include back;
  ::v-deep .header {
    @include back;
  }
  
  .jisuan-header {
    width: 90%;
    margin: auto;
    height: 70px;
    border-radius: 12px;
    padding-top: 16px;
    .header-content {
      position: relative;
      opacity: 1;
      background: linear-gradient(284deg, #FFFFFF 63%, rgba(255, 255, 255, 0.5542) 76%, rgba(133, 153, 255, 0) 98%);
      display: flex;
      border-radius: 12px;
      .left {
        width: 120px;
        height: 70px;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
      }
      .right {
        position: absolute;
        top: 0;
        left: 91px;
        flex: 1;
        padding: 12px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        .top {
          display: flex;
          align-items: center;
          .name {
            font-size: 14px;
            font-weight: 500;
            line-height: 100%;
            color: rgba(0, 0, 0, 0.9);
          }
          ::v-deep .u-button__text {
            font-size: 12px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
          }
          ::v-deep .u-icon {
            margin-right: 5px;
            width: 12px;
            .u-icon__img {
              width: 12px !important;
              height: 10px !important;
            }
            // height: 83%;
          }
        }
        .bottom {
          margin-top: 11px;
          font-size: 12px;
          font-weight: normal;
          line-height: 100%;
          text-align: center;
          color: rgba(0, 0, 0, 0.4);
        }
      }
    }
  }
  .content {
    width: 90%;
    margin: auto;
    border-radius: 12px;
    margin-top: 12px;
    background: #fff;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      padding: 7px 16px 0px 16px;
      background: linear-gradient(180deg, rgba(42, 152, 255, 0.07) 0%, rgba(125, 192, 255, 0.0429) 62%, rgba(255, 255, 255, 0) 100%), #FFFFFF;
      height: 44px;
    }
    ::v-deep .u-list {
      margin: auto;
      height: auto !important;
      max-height: calc(100vh - 250px);
      .u-cell__body {
        padding: 16px 0;
      }
      .u-tag--primary {
        border: none;
        padding: 0 10px !important;
        height: 24px !important;
        line-height: 24px !important;
      }
      .u-line {
        border-color: #F2F2F2;
      }
      .no-data {
        height: 505px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .no-data-img {
          width: 100px;
          height: 95px;
        }
        .no-data-text {
          font-size: 11px;
          font-weight: normal;
          line-height: 12.45px;
          text-align: center;
          display: flex;
          align-items: center;
          color: rgba(0, 0, 0, 0.4);
        }
      }
    }
    .no-more {
      font-size: 12px;
      font-weight: normal;
      line-height: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0px;
      /* base/font/gy4 */
      color: rgba(0, 0, 0, 0.24);
      padding-bottom:12px;
    }
  }
}
</style>
